<!--用户管理-->
<template>
  <div class="page-container">
    <ex_super_table_page v-bind="option" ref="SuperTablePage">
    </ex_super_table_page>

    <ex_super_dialog_form ref="rechargeDialog" v-bind="rechargeDialog" @afterSubmitSuccess="reload()">
    </ex_super_dialog_form>
    <ex_super_dialog_form ref="detailDialog" v-bind="detailDialog" />
  </div>
</template>
<script>


import router_params from '@/mixin/router_params';

import superTablePageFunction from '@/mixin/super-table-page-function';

export default {

  title: 'label_fms_recharge_record_manage',
  components: {},
  mixins: [superTablePageFunction, router_params],

  data() {


    return {
      isConfirm_routeParamsChange: false,
      option: {
        search: {
          model: [
            {
              label: "label_status", key: "status", type: 'select', enum: 'FmsCreditApplyStatus', attrs: { clearable: true },
            },
            {
              label: "label_recharge_serial_number", key: "rechargeNo", attrs: { clearable: true },
            },

          ]
        },
        action: [
          {
            label: 'label_offline_account', attrs: { icon: "el-icon-plus" }, click: () => {

              this.$refs.rechargeDialog.showNew({
                title: this.$t('label_offline_account'),
                data: { isTransToOtherAccount: "N" },
                onlySetData: true,
              })
            }
          },
          // {
          //   label: 'label_export', attrs: {icon: "el-icon-plus"}, click:  this.$noFunction
          // },
        ],

        table: {
          url: "/fms-api/client/FmsClientRpc/selectRecharge.json",
          attrs: {
            'cell-style': ({ row, column, rowIndex, columnIndex }) => {
              if (column.property == 'status') {
                return { color: row.status == 'NORMAL' ? this.$globalCss.successColor : this.$globalCss.infoColor }
              }
            }
          },
          model: [
            // {
            //   key: 'companyName', label: '客户名称', align: 'left', attrs: {
            //     formatter: (r, c, v, i) => {
            //       return '[' + r.customerCode + '] ' + r.customerName
            //     }
            //   }
            // },
            {
              key: 'rechargeNo', label: 'label_recharge_serial_number', align: 'center'
            },
            {
              key: 'accountType', label: 'label_recharge_account',
              attrs: {
                formatter: (r, c, v, i) => {
                  return this.$enumShow(r.currencyType, 'CurrencyTypeEnum') + ' - ' + this.$enumShow(v, 'CustomerAccountTypeEnum')
                }
              }
            },
            {
              key: 'exchangeCurrencyType', label: 'label_exchange_transfer_account',
              attrs: {
                formatter: (r, c, v, i) => {
                  if (r.exchangeAccountId) {
                    return this.$enumShow(r.exchangeCurrencyType, 'CurrencyTypeEnum') + ' - ' + this.$enumShow(r.accountType, 'CustomerAccountTypeEnum')
                  }
                }
              }
            },
            {
              key: 'bankCardNo', label: 'label_fms_recharge_pay_card',
              attrs: {
                formatter: (r, c, v, i) => {

                  if (r.bankCardNo && r.bankName) {
                    return r.bankName + ' (' + (r.bankCardNo.length > 4 ? r.bankCardNo.substring(r.bankCardNo.length - 4) : r.bankCardNo) + ')'
                  }
                  return ''
                }
              }
            },
            {
              key: 'payBankCardNo', label: 'label_payment_bank_card',
              attrs: {
                formatter: (r, c, v, i) => {

                  if (r.payBankCardNo && r.payBankName) {
                    return r.payBankName + ' (' + (r.payBankCardNo.length > 4 ? r.payBankCardNo.substring(r.payBankCardNo.length - 4) : r.payBankCardNo) + ')'
                  }
                  return ''
                }
              }
            },

            { key: 'applyAmount', label: 'label_fms_recharge_recharge_amount', align: 'center' },
            {
              key: 'status', label: 'label_status',
              attrs: {
                formatter: (r, c, v, i) => {
                  return this.$enumShow(v, 'FmsCreditApplyStatus')
                }
              }
            },
            {
              key: 'remark', label: 'label_remark', width: 100,
              render: (h, { row, column }) => {
                const value = row[column.property]
                if (value) {
                  return (<text_extra_tooltip_operate
                    value={value} ellipsis
                    data_type={column.property} data_id={row.id}
                  />)
                }
                return this.$renderText(h, row[column.property])
              }
            },
            { key: 'submitUserName', label: 'label_fms_account_apply_apply_user', align: 'center' },
            { key: 'auditUserName', label: 'label_fms_account_apply_audit_user', align: 'center' },
            {
              key: 'gmtCreate', label: 'label_fms_account_apply_apply_date', attrs: {
                formatter: (r, c, v, i) => {
                  return this.$dateFormat(v)
                }
              }
            },
            {
              key: 'submitTime', label: 'label_fms_recharge_payment_date', attrs: {
                formatter: (r, c, v, i) => {
                  return this.$dateFormat(v)
                }
              }
            },
            {
              key: 'auditTime', label: 'label_fms_account_apply_audit_date', attrs: {
                formatter: (r, c, v, i) => {
                  return this.$dateFormat(v)
                }
              }
            },
            { key: 'refuseReason', label: 'label_fms_account_apply_refuse_reason', align: 'left' },
            {
              type: 'operate', width: 160,
              operate: [
                {
                  label: 'label_view_detail', click: (row) => {
                    this.$refs.detailDialog.showNew({
                      title: this.$t("label_fms_recharge_record"),
                      data: row,
                      onlySetData: true,
                    })
                  }
                },
              ],
            }
          ]
        }
      },

      rechargeDialog: {
        customClass: 'dialog_auto',
        submitUrl: '/fms-api/client/FmsClientRpc/saveUpdateRecharge.json',
        submitDataHandle: (data) => {
          if (data.isTransToOtherAccount == 'N') data.exchangeAccountId = null
          data.files = data.files ? data.files.map(it => it.filePath) : []
          return data
        },
        form: {
          itemClass: "form_item_mini", inputClass: "form_input_small",
          model: [
            {
              grid: [
                [
                  {
                    span: 12, col: {
                      key: 'accountId', label: 'label_fms_recharge_account',
                      render: (h, { data, item }) => {
                        const value = data[item.key]
                        return <ex_select_auto
                          value={value}
                          onInput={e => this.$set(data, item.key, e)}
                          url="/fms-api/client/FmsClientRpc/selectAccount.json"
                          option={item => ({
                            label: `${this.$enumShow(item.currencyType, 'CurrencyTypeEnum')} - ${this.$enumShow(item.accountType, 'CustomerAccountTypeEnum')}`,
                            value: item.id
                          })}
                          urlParams={{ accountType: 'CASH', status: 'ENABLE' }}
                        />
                      },
                    },
                  },
                ],
                [
                  {
                    span: 12, col: {
                      key: 'isTransToOtherAccount', label: 'label_is_in_exchange_transfer', type: 'radio-group',
                      enum: "YesOrNoEnum",
                    },
                  },
                  {
                    span: 12, col: {
                      if: (data) => data.isTransToOtherAccount == 'Y',
                      key: 'exchangeAccountId', label: 'label_exchange_transfer_account',
                      rules: (data) => {
                        return [
                          { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
                          {
                            validator: (r, v, cb) => {
                              if (data.isTransToOtherAccount == 'Y' && data.accountId == v) {
                                cb(this.$t("tip_recharge_account_no_some_exchange_transfer_account"))
                              } else {
                                cb()
                              }
                            }
                          }]
                      },
                      render: (h, { data, item }) => {
                        const value = data[item.key]
                        return <ex_select_auto
                          value={value}
                          onInput={e => this.$set(data, item.key, e)}
                          url="/fms-api/client/FmsClientRpc/selectAccount.json"
                          option={item => ({
                            label: `${this.$enumShow(item.currencyType, 'CurrencyTypeEnum')} - ${this.$enumShow(item.accountType, 'CustomerAccountTypeEnum')}`,
                            value: item.id
                          })}
                          urlParams={{ accountType: 'CASH', status: 'ENABLE' }}
                        />
                      },

                    },
                  },

                ],
                [
                  {
                    span: 12, col: {
                      key: 'bankCardId', label: 'label_fms_recharge_collection_card', type: 'select',
                      url: '/fms-api/client/FmsClientRpc/selectEnableBankcard.json', storeData: true,
                      option: { label: 'bankName', value: 'id' },
                      keyExtra: { bankName: "bankName", bankCardNo: "bankCardNo" },
                    },
                  },
                  { span: 12, col: { key: 'bankName', label: 'label_fms_recharge_collection_card_name', }, },
                ],
                [
                  { span: 12, col: { key: 'bankCardNo', label: 'label_fms_recharge_collection_card_no', }, },
                ],
                [
                  { span: 12, col: { key: 'payBankName', label: 'label_fms_recharge_payment_card_name', }, },
                  { span: 12, col: { key: 'payBankCardNo', label: 'label_fms_recharge_payment_card_no', }, },
                ],
                [
                  { span: 12, col: { key: 'paySerialNo', label: 'label_fms_recharge_payment_order_no', }, },
                ],
                [
                  {
                    span: 12, col: {
                      key: 'applyAmountFast', label: 'label_recharge_amount',
                      render: (h, { data, item }) => {
                        const value = data[item.key]
                        return (<el-radio-group class="flex_row" value={value} onInput={e => {
                          this.$set(data, item.key, e)
                          if (e != "manualAmount") {
                            this.$set(data, 'applyAmount', e)
                          }
                        }} >
                          <el-radio class="recharge_amount_radio" label="300" border></el-radio>
                          <el-radio class="recharge_amount_radio" label="600" border></el-radio>
                          <el-radio class="recharge_amount_radio" label="1000" border></el-radio>
                          <el-radio class="recharge_amount_radio" label="manualAmount" border>{this.$t('label_manual_input')}</el-radio>
                        </el-radio-group>)
                      },
                    },
                  },
                ],
                [
                  {
                    span: 12, col: { key: 'applyAmount', label: 'label_recharge_amount', if: (data) => data.applyAmountFast == 'manualAmount', },
                  },
                  {
                    span: 12, col: {
                      key: 'submitTime', label: 'label_fms_recharge_payment_date', type: "date-picker",
                      attrs: { placeholder: this.$t('tip_please_select'),type:"datetime" }
                    },
                  },
                ],
                [
                  {
                    span: 24, col: {
                      key: 'remark', label: 'label_remark',
                      itemClass: "", inputClass: "",
                    },
                  },
                ],
              ],

            },
            {
              key: 'isUpload',
              label: 'label_fms_recharge_upload_credentials',
              render: (h, { data }) => {
                return (<ex_super_upload value={data.files} type="image"
                  onInput={e => this.$set(data, 'files', e)}
                  onIsUploadChange={e => this.$set(data, 'isUpload', e)}
                  limit={1} headers={{ targetFolder: 'fms/recharge' }}
                />)
              },

            },


          ],
          rules: {
            isUpload: {
              validator: (r, v, cb) => {
                if (v) {
                  cb(this.$tt("label_uploading"))
                } else {
                  cb()
                }
              }
            },
            customerId: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            accountId: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            exchangeAccountId: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            bankCardId: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            bankName: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            bankCardNo: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            payBankName: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            payBankCardNo: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            paySerialNo: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
            applyAmount: [
              { required: true, pattern: /^(?!0\d)[1-9]\d{0,9}(?:\.\d{1,2})?$/, message: this.$tt('tip_type_must_more_and_less', { i18n: { type: true }, type: "label_recharge_amount", min: "1", max: "10000000000" }), trigger: 'change' },
              {
                trigger: 'change',
                validator: (r, v, cb) => {
                  if (Number.isNaN(Number(v)) || Number(v) < 300) {
                    cb(this.$tt("tip_recharge_amount_min_count", { count: 300 }))
                  } else {
                    cb()
                  }
                },
              }
            ],
          },
        }
      },
      detailDialog: {
        customClass: 'dialog_auto',

        form: {
          itemClass: "form_item_mini", inputClass: "form_input_small",
          model: [
            { header: 'label_fms_account_log_apply_info' },

            {
              grid: [
                [
                  {
                    span: 12, col: {
                      key: 'accountId', label: 'label_fms_account_apply_account_category', formType: "text",
                      formatter: (r, c, v) => `${this.$enumShow(r.currencyType, 'CurrencyTypeEnum')} - ${this.$enumShow(r.accountType, 'CustomerAccountTypeEnum')}`,
                    },
                  },
                ],
                [
                  {
                    span: 12, col: {
                      key: 'isTransToOtherAccount', label: '是否入账转兑', formType: "text",
                      render: (h, { data, item }) => {
                        const value = data[item.key]
                        return this.$renderText(h, this.$enumShow(value ? value : 'N', "YesOrNoEnum"))
                      },
                    },
                  },
                  {
                    span: 12, col: {
                      if: (data) => data.isTransToOtherAccount == 'Y', formType: "text",
                      key: 'exchangeAccountId', label: '转兑账户',
                      formatter: (r, c, v) => `${this.$enumShow(r.currencyType, 'CurrencyTypeEnum')} - ${this.$enumShow(r.accountType, 'CustomerAccountTypeEnum')}`,
                    },
                  },

                ],
                [

                  {
                    span: 12, col: {
                      key: 'bankName', label: 'label_fms_recharge_collection_card_name', formType: "text",
                      render: (h, { data, item }) => this.$renderText(h, data[item.key]),

                    },
                  },
                  {
                    span: 12, col: {
                      key: 'bankCardNo', label: 'label_fms_recharge_collection_card_no', formType: "text",
                      render: (h, { data, item }) => this.$renderText(h, data[item.key]),

                    },
                  },
                ],
                [
                  {
                    span: 12, col: {
                      key: 'payBankName', label: 'label_fms_recharge_payment_card_name', formType: "text",
                      render: (h, { data, item }) => this.$renderText(h, data[item.key]),
                    },
                  },
                  {
                    span: 12, col: {
                      key: 'payBankCardNo', label: 'label_fms_recharge_payment_card_no', formType: "text",
                      render: (h, { data, item }) => this.$renderText(h, data[item.key]),
                    },
                  },
                ],
                [
                  {
                    span: 12, col: {
                      key: 'paySerialNo', label: 'label_fms_recharge_payment_order_no', formType: "text",
                      render: (h, { data, item }) => this.$renderText(h, data[item.key]),
                    },
                  },
                ],
                [
                  {
                    span: 12, col: {
                      key: 'applyAmount', label: 'label_fms_recharge_recharge_amount', formType: "text",
                      render: (h, { data, item }) => this.$renderText(h, data[item.key]),

                    },
                  },
                  {
                    span: 12, col: {
                      key: 'submitTime', label: 'label_fms_recharge_payment_date', formType: "text",
                      render: (h, { data, item }) => this.$renderText(h, this.$dateFormat(data[item.key])),

                    },
                  },
                ],
                [
                  {
                    span: 24, col: {
                      key: 'remark', label: 'label_remark', formType: "text",
                      itemClass: "", inputClass: "",
                    },
                  },
                ],
              ],

            },
            {
              key: 'files',
              label: 'label_fms_recharge_upload_credentials',
              render: (h, { data }) => {
                if (_.isEmpty(data.files)) return this.$renderText(h, null)
                return (<div class="flex_row_wrap">
                  {
                    data.files.map(it => (
                      <ex_image_view src={it}
                        preview-src-list={data.files}
                      />
                    ))
                  }
                </div>)
              },
            },
            { header: 'label_fms_account_log_examine_result' },

            {
              grid: [
                [
                  {
                    span: 12, col: {
                      key: 'status',
                      label: 'label_fms_account_log_examine_result',
                      formType: "text",
                      render: (h, { data, item }) => {
                        return this.$renderText(h, this.$enumShow( data[item.key], 'FmsCreditApplyStatus'))
                      },
                    },
                  },
                  {
                    span: 12, col: {
                      if: (data) => data.status == 'FAIL',
                      key: 'refuseReason', label: 'label_fms_account_log_examine_fail_reason',
                      formType: "text",
                      render: (h, { data, item }) => {
                        let value = data[item.key]
                        return this.$renderText(h, value)
                      },
                    },
                  },

                ],

              ],
            },

          ],
        }
      },
    };
  },






  methods: {
    init_data_default(params) {
      if (params.autoRecharge) {
        this.$refs.rechargeDialog.showNew({
          title: this.$t('label_offline_account'),
          data: { isTransToOtherAccount: "N" },
          onlySetData: true,
        })
      }

    },


  }
};

</script>
<style >
.recharge_amount_radio>.el-radio__input>.el-radio__inner {
  display: none;

}
</style>
